<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-07-31 17:46:49
 * @LastEditTime: 2019-11-28 15:58:02
 * @LastEditors: Please set LastEditors
 -->
<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>Hello APP</title>
    <link rel="stylesheet" type="text/css" href="../../css/vant.css">
    </link>
    <link rel="stylesheet" type="text/css" href="../../css/base.css">
    </link>
    <!-- <link rel="stylesheet" type="text/css" href="../../script/elementui/lib/theme-chalk/index.css"></link> -->
    <!-- <link rel="stylesheet" type="text/css" href="../../script/elementui/vue-element-table.css"></link> -->
    <link rel="stylesheet" href="../../css/elementui.css">
    <script type="text/javascript" src="../../script/jquery.js"></script>
    <script type="text/javascript" src="../../script/layer/mobile/layer.js"></script>
    <script type="text/javascript" src="../../script/vue.min.js"></script>
    <script type="text/javascript" src="../../script/vant.min.js"></script>
    <script type="text/javascript" src="../../script/fastclick.js"></script>
    <!-- <script type="text/javascript" src="../../script/elementui/vue-element-bigdata-table.min.js"></script> -->
    <script src="../../script/elementui.js"></script>
    <script type="text/javascript" src="../../script/base.js"></script>
    <script type="text/javascript" src="../../script/JSLINQ.js"></script>
    <style type="text/css">
        body {
            zoom: 0.9;
        }

        .van-search {
            padding: 6px 0;
            border-bottom: 1px solid #ebedf0;
        }

        .van-search__action {
            color: #cd1b21;
            font-size: 13px;
            font-weight: 700;
        }

        .result {
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
        }

        .desc {
            color: #969799;
        }

        .selections {
            padding: 5px;
            overflow: auto;
        }

        .van-tag {
            margin-left: 5px;
        }

        .mainBox {
            display: flex;
        }

        .mainBox .main_left {
            width: 42% !important;
            background-color: #e6e6e6;
            height: 100vh;
            overflow: auto;
        }

        #app>.box .mainBox .content {
            height: 100vh !important;
            width: 58% !important;
        }

        .el-tree {
            min-width: 40%;
        }

        .el-tree-node>.el-tree-node__content {
            /* padding: 10px 0 !important; */
            padding-top: 20px !important;
            padding-bottom: 20px !important;
            /* height: 30px; */
        }

        /* .el-tree-node__children {
             padding: 6px 0;
         } */
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <div class="box">
            <van-nav-bar-main title="筛选" left-arrow @click-left="onClickLeft">
                <div slot="right">
                    <span @click="confirmChoice">确定</span>
                    <span @click="clearAll">清空</span>
                </div>
            </van-nav-bar-main>

            <div class="content flex-box flex-direction-c">
                <div>
                    <form action="">
                        <van-search v-model="filterData" placeholder="请输入搜索关键词" show-action @input="searchList">
                            <div slot="action" @click="searchList">查询</div>
                        </van-search>
                    </form>
                </div>
                <div class="selections" v-if="selections.length">
                    <van-tag closeable size="large" type="primary" v-for="(item, index) in selections"
                        @close="closeTag(index)">
                        {{ item.name }}
                    </van-tag>
                </div>
                <div class="flex-main result">
                    <div>
                        <van-cell v-for="row in filterResult" clickable @click="selectRow(row)">
                            <div>
                                <div>{{row.name}}</div>
                            </div>
                        </van-cell>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

<script type="text/javascript">
    var vm;
    apiready = function () {
        //$('.init-full').show();
        vm = new Vue({
            el: '#app',
            data: {
                filterResult: [],
                filterData: '',
                chooseType: 0,
                selections: api.pageParam.currentList || [],
                cmd: api.pageParam.cmd,
                cmdObj: api.pageParam.cmdObj,
                type: api.pageParam.type,
            },
            created: function () {
                var that = this
                console.log('pageParam', JSON.stringify(api.pageParam))

                that.getSearchList();
            },
            methods: {
                onClickLeft() {
                    api.closeWin();
                },
                getSearchList() {
                    var that = this
                    console.log('that.cmd', JSON.stringify(that.cmd))
                    console.log('that.cmdObj', JSON.stringify(that.cmdObj))
                    APP.ajax(that.cmd, that.cmdObj, function (res) {
                        console.log('res', JSON.stringify(res))
                        if (that.cmd == 'APP_DG_RYXL') {
                            res.ds.map((item) => {
                                item.name = item.EmplName
                            })
                        }
                        if (that.cmd == 'APP_JYRWC_JYXMDX') {
                            res.ds.map((item) => {
                                item.name = item.NAME
                            })
                        }
                        if (that.cmd == 'XJ_GXXL') {
                            res.ds.map((item) => {
                                item.name = item.ProcedureName
                            })
                        }
                        that.filterResult = res.ds;
                    })
                },
                selectRow(rowItem) {
                    var that = this
                    var flag
                    switch (that.cmd) {
                        case 'APP_JYRWC_JYXMDX':
                            flag = that.selections.findIndex((item) => item.name == rowItem.name)
                            break;
                        case 'XJ_GXXL':
                            flag = that.selections.findIndex((item) => item.ProcedureID == rowItem.ProcedureID)
                            break;
                        case 'APP_DG_RYXL':
                            flag = that.selections.findIndex((item) => item.userid_num == rowItem.userid_num)
                            break;
                    }
                    if (that.selections.length && flag != -1) {
                        vm.$toast('请勿重复选择！');
                    } else {
                        that.selections.push(rowItem)
                    }
                },
                closeTag(tagIndex) {
                    var that = this
                    that.selections.splice(tagIndex, 1)
                },
                searchList() {
                    var that = this
                    if (that.filterData) {
                        console.log('that.filterData', JSON.stringify(that.filterData))
                        that.filterResult = []
                        APP.ajax(that.cmd, that.cmdObj, function (res) {
                            if (that.cmd == 'APP_DG_RYXL') {
                                res.ds.map((item) => {
                                    item.name = item.EmplName
                                    if (item.name.indexOf(that.filterData) > -1) {
                                        that.filterResult.push(item)
                                    }
                                })
                            }
                            else if (that.cmd == 'APP_JYRWC_JYXMDX') {
                                res.ds.map((item) => {
                                    item.name = item.NAME
                                    if (item.name.indexOf(that.filterData) > -1) {
                                        that.filterResult.push(item)
                                    }
                                })
                            }
                            else if (that.cmd == 'XJ_GXXL') {
                                res.ds.map((item) => {
                                    item.name = item.ProcedureName
                                    if (item.name.indexOf(that.filterData) > -1) {
                                        that.filterResult.push(item)
                                    }
                                })
                            }

                            else {
                                res.ds.map((item) => {
                                    if (item.name.indexOf(that.filterData) > -1) {
                                        that.filterResult.push(item)
                                    }
                                })
                            }

                        })
                    } else {
                        that.getSearchList()
                    }
                },
                clearAll() {
                    var that = this
                    that.selections = []
                },
                confirmChoice() {
                    var that = this
                    api.sendEvent({
                        name: 'selectRow',
                        extra: {
                            chooseType: that.type,
                            row: that.selections
                        }
                    });
                    api.closeWin()
                }
            }
        })
    };
</script>

</html>